<template>
  <div>
    <el-table
        :data="list"
        style="width: 100%">

      <el-table-column
          label="序号"
          type="index"
          width="80"
      />
      <el-table-column
          v-for="(item,index) in settings"
          :key="item"
          :label="item"
          :prop="index"
          v-if="whiteList(index)"

      />
      <el-table-column label="购买日期" v-if="status">
        <template slot-scope="scope">
          <span>{{ scope.row.redeemDatetime|toUtcTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="购买日期" v-else>
        <template slot-scope="scope">
          <span>{{ scope.row.goodOrderDate|toUtcTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发货状态">
        <template slot-scope="scope">
          {{ scope.row.orderType|ispost }}
        </template>
      </el-table-column>

      <el-table-column
          label="操作"
          fixed="right"
          width="100"
          align="center"
          header-align="center"
          v-if="needCtrl"
      >
        <template slot-scope="scope">
          <slot name="ctrl" :info="scope.row"/>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
        :current-page="currentPage"
        :page-size="currentPageSize"
        :page-sizes="[10, 50, 100, 500, 1000, 99999]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleGetBySizeOrderManage"
        @current-change="handleGetByNumOrderManage"
    />
  </div>
</template>

<script>
export default {
  props: {
    orderType: Number,
    needCtrl: Boolean,
    status: Number,
  },
  data () {
    return {
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      list: [],
    };
  },
  computed: {
    settings () {
      return {
        "goodsId": "商品ID",
        "goodOrderAddress": "收货地址",
        "redeemDatetime": "",
        "orderType": "是否发货",
        "volunteerName": "购买者",
        "goodOrderDate": "购买日期",

      };
    },

  },

  filters: {
    ispost (val) {
      if (val) {
        return "已发货";
      }
      return "待发货";
    },
  },
  mounted () {
    this.handleGetOrderByType();
  },
  methods: {
    handleGetBySizeOrderManage (size) {
      this.currentPageSize = size;
      this.handleGetOrderByType();

    },
    handleGetByNumOrderManage (num) {
      this.currentPage = num;
      this.handleGetOrderByType();
    },
    async handleGetOrderByType () {
      let {
        currentPage,
        currentPageSize,
        orderType,
        status,
      } = this;

      let params = {
        pageNum: currentPage,
        pageSize: currentPageSize,
      };
      let method = null;
      if (orderType === 0) {
        switch (status) {
          case 0:
            method = this.$http.allScoreExchangebyispost;
            params["ispost"] = status;
            break;
          case 1:
            method = this.$http.allScoreExchangebyispost;
            params["ispost"] = status;
            break;
          default:
            method = this.$http.AllScoreExchange;
            break;
        }
        const res = await method(params);
        this.list = res.data.list;
        this.total = res.data.totalCount;
      } else {
        switch (status) {
          case 0:
            method = this.$http.noPostAllGoodsOrder;
            break;
          default:
            method = this.$http.getOrderByOrderType;
            params["orderType"] = 1;
            break;
        }
        const res = await method(params);
        this.list = res.data.list;
        this.total = res.data.totalCount;
      }

    },

    whiteList (val) {
      let _whiteList = ["redeemDatetime", "ispost", "goodOrderDate","orderType"];
      return !_whiteList.includes(val);
    },
  },
};
</script>

<style scoped>
>>> .el-pagination {
  margin-top: 1em;
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>
